import React from 'react';
import { Card, Table, Tag, Button, Space, Row, Col, Statistic, Alert } from 'antd';
import { CheckCircleOutlined, ClockCircleOutlined, WarningOutlined, StopOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';

interface ServiceInfo {
  id: string;
  name: string;
  type: string;
  status: 'running' | 'stopped' | 'warning' | 'pending';
  uptime: string;
  lastCheck: string;
  cpu: number;
  memory: number;
  threads: number;
  description: string;
}

const ServiceMonitor: React.FC = () => {
  // 模拟服务状态统计数据
  const statistics = {
    total: 12,
    running: 8,
    warning: 2,
    stopped: 1,
    pending: 1,
  };

  // 模拟服务列表数据
  const serviceData: ServiceInfo[] = [
    {
      id: 'SRV001',
      name: 'API网关服务',
      type: '核心服务',
      status: 'running',
      uptime: '30天4小时',
      lastCheck: '2024-01-20 10:30:00',
      cpu: 15.2,
      memory: 1.8,
      threads: 24,
      description: '系统API网关服务，负责请求路由和负载均衡',
    },
    {
      id: 'SRV002',
      name: '用户认证服务',
      type: '核心服务',
      status: 'warning',
      uptime: '15天2小时',
      lastCheck: '2024-01-20 10:30:00',
      cpu: 45.5,
      memory: 3.2,
      threads: 36,
      description: '用户认证和授权服务，CPU使用率过高',
    },
    {
      id: 'SRV003',
      name: '数据同步服务',
      type: '后台服务',
      status: 'stopped',
      uptime: '0',
      lastCheck: '2024-01-20 10:30:00',
      cpu: 0,
      memory: 0,
      threads: 0,
      description: '数据同步服务异常停止',
    },
    {
      id: 'SRV004',
      name: '消息队列服务',
      type: '中间件',
      status: 'running',
      uptime: '45天8小时',
      lastCheck: '2024-01-20 10:30:00',
      cpu: 22.4,
      memory: 2.4,
      threads: 16,
      description: '系统消息队列服务，负责异步消息处理',
    },
    {
      id: 'SRV005',
      name: '缓存服务',
      type: '中间件',
      status: 'pending',
      uptime: '0',
      lastCheck: '2024-01-20 10:30:00',
      cpu: 5.5,
      memory: 0.8,
      threads: 8,
      description: '系统缓存服务正在启动中',
    },
  ];

  const getStatusIcon = (status: ServiceInfo['status']) => {
    switch (status) {
      case 'running':
        return <CheckCircleOutlined style={{ color: '#52c41a' }} />;
      case 'warning':
        return <WarningOutlined style={{ color: '#faad14' }} />;
      case 'stopped':
        return <StopOutlined style={{ color: '#f5222d' }} />;
      case 'pending':
        return <ClockCircleOutlined style={{ color: '#1890ff' }} />;
      default:
        return null;
    }
  };

  const getStatusText = (status: ServiceInfo['status']) => {
    const statusMap = {
      running: { text: '运行中', color: 'success' },
      warning: { text: '警告', color: 'warning' },
      stopped: { text: '已停止', color: 'error' },
      pending: { text: '启动中', color: 'processing' },
    };
    return statusMap[status];
  };

  const handleRestart = (record: ServiceInfo) => {
    console.log('重启服务:', record.id);
  };

  const handleStop = (record: ServiceInfo) => {
    console.log('停止服务:', record.id);
  };

  const handleStart = (record: ServiceInfo) => {
    console.log('启动服务:', record.id);
  };

  const columns: ColumnsType<ServiceInfo> = [
    {
      title: '服务ID',
      dataIndex: 'id',
      key: 'id',
      width: 100,
    },
    {
      title: '服务名称',
      dataIndex: 'name',
      key: 'name',
      width: 150,
    },
    {
      title: '服务类型',
      dataIndex: 'type',
      key: 'type',
      width: 120,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 120,
      render: (status: ServiceInfo['status']) => {
        const statusInfo = getStatusText(status);
        return (
          <Space>
            {getStatusIcon(status)}
            <Tag color={statusInfo.color}>{statusInfo.text}</Tag>
          </Space>
        );
      },
    },
    {
      title: '运行时间',
      dataIndex: 'uptime',
      key: 'uptime',
      width: 120,
    },
    {
      title: '资源使用',
      children: [
        {
          title: 'CPU(%)',
          dataIndex: 'cpu',
          key: 'cpu',
          width: 100,
          render: (value: number) => {
            const color = value > 80 ? 'red' : value > 50 ? 'orange' : 'green';
            return <Tag color={color}>{value}%</Tag>;
          },
        },
        {
          title: '内存(GB)',
          dataIndex: 'memory',
          key: 'memory',
          width: 100,
          render: (value: number) => `${value} GB`,
        },
        {
          title: '线程数',
          dataIndex: 'threads',
          key: 'threads',
          width: 100,
        },
      ],
    },
    {
      title: '最后检查时间',
      dataIndex: 'lastCheck',
      key: 'lastCheck',
      width: 180,
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
      width: 200,
      ellipsis: true,
    },
    {
      title: '操作',
      key: 'action',
      width: 200,
      render: (_, record) => (
        <Space>
          {record.status !== 'stopped' && (
            <Button size="small" danger onClick={() => handleStop(record)}>
              停止
            </Button>
          )}
          {record.status === 'stopped' && (
            <Button size="small" type="primary" onClick={() => handleStart(record)}>
              启动
            </Button>
          )}
          <Button size="small" onClick={() => handleRestart(record)}>
            重启
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <div style={{ paddingTop: '20px' }}>
      {/* 异常服务告警 */}
      

      {/* 服务状态统计 */}
      <Row gutter={[16, 16]}>
        <Col span={4}>
          <Card>
            <Statistic title="服务总数" value={statistics.total} />
          </Card>
        </Col>
        <Col span={5}>
          <Card>
            <Statistic
              title="正常运行"
              value={statistics.running}
              valueStyle={{ color: '#52c41a' }}
              prefix={<CheckCircleOutlined />}
            />
          </Card>
        </Col>
        <Col span={5}>
          <Card>
            <Statistic
              title="运行警告"
              value={statistics.warning}
              valueStyle={{ color: '#faad14' }}
              prefix={<WarningOutlined />}
            />
          </Card>
        </Col>
        <Col span={5}>
          <Card>
            <Statistic
              title="已停止"
              value={statistics.stopped}
              valueStyle={{ color: '#f5222d' }}
              prefix={<StopOutlined />}
            />
          </Card>
        </Col>
        <Col span={5}>
          <Card>
            <Statistic
              title="启动中"
              value={statistics.pending}
              valueStyle={{ color: '#1890ff' }}
              prefix={<ClockCircleOutlined />}
            />
          </Card>
        </Col>
      </Row>

      {/* 服务列表 */}
      <Card title="服务列表" style={{ marginTop: 16 }}>
        <Table<ServiceInfo>
          columns={columns}
          dataSource={serviceData}
          rowKey="id"
          scroll={{ x: 1500 }}
          pagination={false}
        />
      </Card>
    </div>
  );
};

export default ServiceMonitor; 